<template>
<div>
    <div class="dorm-box"  style=" height:'600px'">
      <template  style=" height:'600px'">
        <el-carousel :interval="4000"  indicator-position="outside"  style=" height:'600px'">
          <el-carousel-item v-for="item in imgs" :key="item.id"  style=" height:'600px'">
            <img :src="item.img" class="image" width="100%" height="100%">
          </el-carousel-item>
        </el-carousel>
      </template>
      <div class="content">
        <span class="content-title">宿舍公告</span>
        <el-button type="primary" icon="el-icon-plus" class="addbutton" circle v-if="permissions==1" @click="dialogFormVisible=true"></el-button>
            <div v-for="(item,index) in newsList" style="width: 100%;overflow: hidden">
                <a :href="item.link" >
                <span class="newsTxt">{{item.title}}</span>
                <span class="newsTime">{{item.date}}</span>
               </a>
            </div>
        </div>
      </div>
      <el-dialog title="新增公告" :visible.sync="dialogFormVisible">
        <el-form :model="addform">
          <el-form-item label="主题">
            <el-input v-model="addform.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="链接">
            <el-input v-model="addform.link" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <el-input v-model="addform.date" autocomplete="off" placeholder="格式为年-月-日"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addNewsForm">确 定</el-button>
        </div>
      </el-dialog>
    </div> 
  </div>
</template>
<script>
import request from "@/utils/request";
import { getPermissions,removeToken, getUserName} from "@/utils/auth";

export default {
    name: 'DormManager',
    data() {
        return {
          permissions:'',
          dialogFormVisible:false,
          newsList:'',
          addform:{
            title:'',
            link:'',
            date:''
          },
          imgs: [
        {
          id: 1, img: require('../../assets/pic1.jpg')
        },
        {
          id: 2, img: require('../../assets/pic2.jpg')
        },
        {
          id: 3, img: require('../../assets/pic3.jpg')
        }]
        }
    },
    mounted() {
      this.getNewsList()
      this.getRole()
    },
    methods:{
      getRole(){
      this.permissions = getPermissions()
    },
      getNewsList(){
         request({
          url: "/api/studentInfo/newsList",
          method: "post",
          data:''
        }).then(res => {
          if (res.status=== 200) {
            this.newsList = res.list
            console.log(this.newsList);

          }
        });
      },
      addNewsForm(){

        var addform = this.addform
        request({
          url: "/api/studentInfo/addnewsList",
          method: "post",
          data:addform
        }).then(res => {
          if (res.status=== 200) {
            this.$message({
                type: 'success',
                message: '新增成功!'
              });
            this.dialogFormVisible=false
            this.getNewsList()
          }
        });
      }
    }
}
</script>
<style lang="scss">
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .content{
    float: left;
    overflow: hidden;
    width: 40%;
    background-color: #fff;
    box-shadow: 2x 2px 2px 1px rgba(0, 0, 0, 0.2);
    font-size: 24px;
  }
  .content-title{
    margin: 10px;
  }
  .addbutton{
    float: right;
    margin-top: 10px;
    margin-right: 10px;
  }
  a{
    text-decoration: none;
  }
  ul{
    list-style-type: none;
  }
  .newsTxt{
    float: left;
    margin-left: 10px;
  }
  .newsTime{
    float: right;
    margin-right: 10px;
  }
  .el-carousel__container {
    height: 600px;
  }
</style>